//-----------------------------------------------------学生概况-----------------------------------------------------
// 把index提交并合并，推送到远程，新建dashboard分支
// 获取数据，展示数据
axios.get('/student/overview').then(({
  data: res
}) => {
  // console.log(res);
  // if (res.code === 0) {
  //渲染
  document.querySelector('.total').innerHTML = res.data.total
  document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
  document.querySelector('.avgAge').innerHTML = res.data.avgAge
  document.querySelector('.proportion').innerHTML = res.data.proportion
  // $('.overview .total').text(res.data.total);
  // $('.overview .avgSalary').text(res.data.avgSalary);
  // $('.overview .avgAge').text(res.data.avgAge);
  // $('.overview .proportion').text(res.data.proportion);
  // }
})
//////////////////////////////////////////////////////可视化图表///////////////////////////////////////////////////



//---------------------------------------------------- 饼状图-----------------------------------------------------
function pieChart() {
  // 初始化
  const myChart = echarts.init(document.querySelector('.pie'))
  // 准备配置对象，示例
  const option = {
    // 标题
    title: {
      text: '籍贯Hometown',
      textStyle: {
        color: '#6d767e'
      }
    },
    // 提示框
    tooltip: {
      formatter: '{a}<br/>{b} <b>{c}</b>人 占比{d}%'
    },
    // 系列数据
    series: [{
      name: '各地人员分布',
      type: 'pie',
      radius: ['10%', '60%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 4
      },
      data: [{
          value: 40,
          name: '北京'
        },
        {
          value: 38,
          name: '山东'
        },
        {
          value: 32,
          name: '上海'
        },
        {
          value: 30,
          name: '江苏'
        },
        {
          value: 28,
          name: '河北'
        },
        {
          value: 26,
          name: '山西'
        },
        {
          value: 22,
          name: '河南'
        },
        {
          value: 18,
          name: '辽宁'
        }
      ]
    }]
  };
  // 将配置项配置给图表
  myChart.setOption(option)
}
pieChart()

//-----------------------------------------------------折线图-----------------------------------------------------
// function lineChart({
//   name,
//   salary,
//   truesalary
// }) 
function lineChart(names, salary, truesalary) {
  const myChart = echarts.init(document.querySelector('.line'))
  const option = {
    //标题
    title: {
      text: '薪资Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    //鼠标移入的提示
    tooltip: {
      trigger: 'axis'
    },
    //图例
    legend: {
      data: ['期望薪资', '实际薪资']
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: names
    },
    //坐标轴两边留白策略
    yAxis: {
      type: 'value',
      boundaryGap: [0, '50%']
    },
    //数据缩放组件
    dataZoom: [{
      start: 0,
      end: 10
    }],

    //数据
    series: [{
        name: '期望薪资',
        type: 'line',
        smooth: true,
        // 拐点样式
        symbol: 'none',
        // 性能优化
        sampling: 'lttb',
        itemStyle: { // 单独控制这条线的颜色
          color: '#e66'
        },
        data: salary
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        // 性能优化
        sampling: 'lttb',
        itemStyle: { // 单独控制这条线的颜色
          color: '#5840d7'
        },
        data: truesalary
      }
    ]
  }
  // 将配置项配置给图表
  myChart.setOption(option)
};
// lineChart(names, salary, truesalary)

//---------------------------------------------------- 地 图-----------------------------------------------------
// 地图
function mapChart(chinaGeoCoordMap, chinaDatas) {
  // console.log(chinaGeoCoordMap, chinaDatas);
  // 初始化
  const myChart = echarts.init(document.querySelector('.map'))
  // 准备配置对象，示例
  // 声明省市经纬度 
  var chinaGeoCoordMap = chinaGeoCoordMap //或者不写这段  形参和实参名字一样
  /* var chinaGeoCoordMap = {
    '黑龙江': [127.9688, 45.368],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京市': [116.4551, 40.2539],
    "辽宁": [123.1238, 42.1216],
    "河北": [114.4995, 38.1006],
    "天津": [117.4219, 39.4189],
    "山西": [112.3352, 37.9413],
    "陕西": [109.1162, 34.2004],
    "甘肃": [103.5901, 36.3043],
    "宁夏": [106.3586, 38.1775],
    "青海": [101.4038, 36.8207],
    "新疆": [87.9236, 43.5883],
    "西藏": [91.11, 29.97],
    "四川": [103.9526, 30.7617],
    "重庆": [108.384366, 30.439702],
    "山东": [117.1582, 36.8701],
    "河南": [113.4668, 34.6234],
    "江苏": [118.8062, 31.9208],
    "安徽": [117.29, 32.0581],
    "湖北": [114.3896, 30.6628],
    "浙江": [119.5313, 29.8773],
    "福建": [119.4543, 25.9222],
    "江西": [116.0046, 28.6633],
    "湖南": [113.0823, 28.2568],
    "贵州": [106.6992, 26.7682],
    "云南": [102.9199, 25.4663],
    "广东": [113.12244, 23.009505],
    "广西": [108.479, 23.1152],
    "海南": [110.3893, 19.8516],
    '上海': [121.4648, 31.2891]
  }; */
  //  哪一个省（上面声明过）有学员，点亮
  var chinaDatas = chinaDatas //或者不写这段  形参和实参名字一样
  /* var chinaDatas = [
    [{
      name: '黑龙江',
      value: 0
    }],
    [{
      name: '内蒙古',
      value: 0
    }],
    [{
      name: '吉林',
      value: 0
    }],
    [{
      name: '辽宁',
      value: 0
    }],
    [{
      name: '河北',
      value: 0
    }],
    [{
      name: '天津',
      value: 0
    }],
    [{
      name: '山西',
      value: 0
    }],
    [{
      name: '陕西',
      value: 0
    }],
    [{
      name: '甘肃',
      value: 0
    }],
    [{
      name: '宁夏',
      value: 0
    }],
    [{
      name: '青海',
      value: 0
    }],
    [{
      name: '新疆',
      value: 0
    }],
    [{
      name: '西藏',
      value: 0
    }],
    [{
      name: '四川',
      value: 0
    }],
    [{
      name: '重庆',
      value: 0
    }],
    [{
      name: '山东',
      value: 0
    }],
    [{
      name: '河南',
      value: 0
    }],
    [{
      name: '江苏',
      value: 0
    }],
    [{
      name: '安徽',
      value: 0
    }],
    [{
      name: '湖北',
      value: 0
    }],
    [{
      name: '浙江',
      value: 0
    }],
    [{
      name: '福建',
      value: 0
    }],
    [{
      name: '江西',
      value: 0
    }],
    [{
      name: '湖南',
      value: 0
    }],
    [{
      name: '贵州',
      value: 0
    }],
    [{
      name: '广西',
      value: 0
    }],
    [{
      name: '海南',
      value: 0
    }],
    [{
      name: '上海',
      value: 1
    }]
  ]; */
  // 地图相关
  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539];
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [
    ['北京市', chinaDatas]
  ].forEach(function (item, i) {
    console.log(item)
    series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) { //圆环显示文字
              return params.data.name;
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: "#0f0"
            }
          },
          emphasis: {
            show: true,
            color: "#f60"
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  const option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: '#eee', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };
  // 将配置项配置给图表
  myChart.setOption(option)
}


//---------------------------------------------------- 柱状图-----------------------------------------------------
function barChart(
  avgScore,
  group,
  lt60,
  gt60,
  gt80
) {
  // 初始化
  const myChart = echarts.init(document.querySelector('.barChart'))
  // 准备配置对象，示例
  const option = {
    //标题
    // title: {
    //   text: '成绩'
    // },
    // 网格（整个图表区域设置）
    // grid: {
    //   top: 30,
    //   bottom: 30,
    //   left: '7%',
    //   right: '7%'
    // },

    //图例
    legend: {},
    //鼠标移入的提示
    tooltip: {
      // trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
      //坐标轴指示器
      axisPointer: {
        type: 'cross',
        // label: {
        //   backgroundColor: '#283b56'
        // }
      }
    },
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    xAxis: [{
      type: 'category',
      data: group,
      axisPointer: {
        show: true,
        type: 'shadow'
      },
    }],

    yAxis: [{
      type: 'value',
      min: 0, // y轴数据最小值
      max: 100, // y轴数据最大值
      interval: 10, // step步长，把y轴的数据分成多少份
      axisLabel: { // Y轴文字设置
        formatter: '{value}分', // Y轴文字
      }
    }, {
      type: 'value',
      min: 0,
      max: 10,
      interval: 1,
      axisLabel: {
        formatter: '{value}人'
      }
    }],

    series: [{
      type: 'bar',
      name: '平均分',
      data: avgScore,
      barWidth: 15,
    }, {
      type: 'bar',
      name: '低于60分人数',
      data: lt60,
      barWidth: 15,
    }, {
      type: 'bar',
      name: '60到80分之间',
      data: gt60,
      barWidth: 15,
    }, {
      type: 'bar',
      name: '高于80分人数',
      data: gt80,
      barWidth: 15,
    }]
  };
  // 将配置项配置给图表
  myChart.setOption(option)
}
barChart()


//////////////////////////////////////////////////////可视化图表对应参数///////////////////////////////////////////////////

// 柱状图 
// 1. 实现点击切换显示列表
const btn = document.querySelector('.btn')
let isShow = false
btn.addEventListener('click', function () {
  // 切换
  const ul = document.querySelector('#batch')
  ul.style.display = isShow ? 'none' : 'block'
  isShow = !isShow
})

// 2 实现点击列表项切换展示数据
const liList = document.querySelectorAll('#batch li')
for (var i = 0; i < liList.length; i++) {
  (function (index) {
    liList[index].addEventListener('click', function () {
      // 第几次成绩
      const num = index + 1
      // 请求
      axios.get('/score/batch', {
        params: {
          batch: num
        }
      }).then(({
        data: res
      }) => {
        console.log(res.data)
        if (res.code === 0) {
          // 根据数据渲染柱状图
          barChart(res.data)
        }
      })
    })
  })(i)
}
// 3. 默认情况下展示第一次成绩数据
liList[0].click()



// 折线图  页面加载 获取数据 展示数据
axios.get('/student/list').then(({
  data: res
}) => {
  // console.log(res);
  // 三个数据用法，都是按照顺序讲数据放到各自的数组中
  const names = []
  const salary = []
  const truesalary = []
  // 使用循环将获取到的数据转换成三个数组
  for (let i = 0; i < res.data.length; i++) {
    const item = res.data[i]
    names.push(item.name)
    salary.push(item.salary)
    truesalary.push(item.truesalary)
  }
  // 应用到折线图 
  lineChart(names, salary, truesalary) //获取完数据在调用 不是一上来就调用次函数


  // 地图 转换地图数据
  const chinaGeoCoordMaps = {
    // 必须添加一个北京坐标
    '北京市': [116.4551, 40.2539],
  }
  const chinaDatas = []
  for (let i = 0; i < res.data.length; i++) {
    const item = res.data[i]
    const {
      province,
      jing,
      wei
    } = item

    // 转换
    chinaGeoCoordMaps[province] = [jing, wei]
  }
  for (let key in chinaGeoCoordMaps) {
    chinaDatas.push([{
      name: key,
      value: 0
    }])
  }
  // console.log(chinaGeoCoordMaps, chinaDatas);
  mapChart(chinaGeoCoordMaps, chinaDatas) //获取完数据在调用 不是一上来就调用次函数

  // 饼状数据
  // 准备目标数据
  const arr = []
  // 循环数组
  for (let i = 0; i < res.data.length; i++) {
    // 获取每一个人的省份
    const {
      province
    } = res.data[i]
    // 目标数组中是否有该省份
    // 没有就push
    // 有 就value+1
    const result = arr.find(e => e.name === province)
    if (result) {
      result.value
    } else {
      arr.push({
        name: province,
        value
      })
    }
  }
})

const data = [{
    name: '123',
    salary: 123,
    truesalary: 123,
    jing: 123,
    wei: 123,
    province: '黑龙江'
  },
  {
    name: '123',
    salary: 123,
    truesalary: 123,
    jing: 123,
    wei: 123,
    province: '吉林'
  },
  {
    name: '123',
    salary: 123,
    truesalary: 123,
    jing: 123,
    wei: 123,
    province: '山东'
  },
  {
    name: '123',
    salary: 123,
    truesalary: 123,
    jing: 123,
    wei: 123,
    province: '山海'
  },
]

// 省份经纬度
const obj = {
  '省名': ['精度', '维度'],
  '省名': ['精度', '维度'],
  '省名': ['精度', '维度'],
  '省名': ['精度', '维度'],
  '省名': ['精度', '维度'],
}

// 省份数组
const arr = [
  [{
    name: '省名',
    value: 0
  }],
  [{
    name: '省名',
    value: 0
  }],
  [{
    name: '省名',
    value: 0
  }],
  [{
    name: '省名',
    value: 0
  }],
  [{
    name: '省名',
    value: 0
  }],
]


// 饼状图
// 目标数据
const a = [
  // value 人数
  // nam 省名
  {
    name: '吉林',
    value: 1
  },
  {
    name: '黑龙江',
    value: 1 + 1 //有2个黑龙江的人  不能在生成新对象， 而是累计加1
  },
  {
    name: '山东',
    value: 1
  }
]